<template>
  <div class="new">
    <!-- 子组件导航区 -->
     <li v-for="news in newsList" :key="news.id">
      <RouterLink
        :to="{ path: '/news/detail', query: { id: news.id, content: news.title } }">
        {{ news.title }}
      </RouterLink>
      <button id="showDetail" @click="showNew(news)">查看详细</button>
    </li>
  </div>
  <div class="news-content">
        <RouterView></RouterView>
  </div>
</template>

<script setup lang='ts' name='news'>
import { ref, reactive} from 'vue'
import { useRouter } from 'vue-router';

let newsList = reactive([
    {id:1,title:'化粪池爆炸',content: '化粪池爆炸，导致100人死亡',time:'2022-03-04 15:00:00'},
    {id:2,title:'下北泽爆炸',content: '下北泽爆炸，导致100人死亡',time:'2022-03-04 15:00:00'},
    {id:3,title:'野先辈爆炸',content: '野先辈爆炸，导致100人死亡',time:'2022-03-04 15:00:00'},
])

const route = useRouter();

interface News{
  id:number,
  title:string,
  content: string,
  time: string
}

function showNew(news:News){
  route.push({
    name:'news-detail',
    query:{
      id:news.id,
      content: news.title
    }
  })
}


</script>
<style scoped>
.new {
  color: darkolivegreen;
}

.new::marker {
  color:brown ;
}

#showDetail {
  margin-left: 20px;
}
</style>